<template>
  <div class="home">
    <header>
      <span>主页</span>
    </header>
    <main>
      <div class="list">
        <li>
          <span>id</span>
          <span>姓名</span>
          <span>密码</span>
          <i>添加</i>
          <i>编辑</i>
          <i>删除</i>
        </li>
        <li v-for="(item, index) in userData" :key="index">
          <span>{{ item.id }}</span>
          <span>{{ item.name }}</span>
          <span>{{ item.pwd }}</span>
          <i class="plus icon" @click="showVoid('添加', item.id)"></i>
          <i class="edit icon" @click="showVoid('编辑', item.id)"></i>
          <i class="trash icon" @click="del(item.id)"></i>
        </li>
      </div>

      <van-overlay :show="show" @click="show = false">
        <div class="wrapper" @click.stop>
          <div class="block">
            <van-icon name="cross" @click="show = false" />
            <br>
            <!-- <hr> -->
            <van-form @submit="onSubmit">
              <van-field
                v-model="username"
                name="name"
                label="用户名"
                placeholder="用户名"
                :rules="[{ required: true, message: '请填写用户名' }]"
              />
              <van-field
                v-model="password"
                name="pwd"
                label="密码"
                placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]"
              />
              <div style="margin: 16px">
                <van-button round block type="info" native-type="submit">{{
                  title
                }}</van-button>
              </div>
            </van-form>
          </div>
        </div>
      </van-overlay>
    </main>
  </div>
</template>

<script>
import axios from "axios";
import Vue from "vue";
import { Toast } from "vant";

Vue.use(Toast);
export default {
  name: "Home",
  components: {},
  data() {
    return {
      userData: [],
      show: false,
      username: "",
      password: "",
      title: "添加",
      id: "",
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      axios.get("/api/getUser").then((res) => {
        this.userData = res.data;
      });
    },
    onSubmit({ name, pwd }) {
      let id = this.id;
      if (this.title === "添加") {
        axios.post("/api/addUser", { name, pwd }).then((res) => {
          if (res.data.code === 0) {
            this.show = false;
            Toast.success("添加成功");
            this.getData();
          } else {
            Toast.fail("添加失败");
          }
        });
      } else {
        // 编辑
        axios.post("/api/edit", { name, pwd, id }).then((res) => {
          if (res.data.code === 0) {
            this.show = false;
            Toast.success("修改成功");
            this.getData();
          } else {
            Toast.fail("修改失败");
          }
        })

      }
    },
    async showVoid(type, id) {
      this.title = type;
      this.id = id;
      if (this.title === "编辑") {
        const { data: {name, pwd} } =  await axios.post('/api/getDataById', {id});
        this.username = name;
        this.password = pwd;
        this.show = true;
      } else {
        this.show = true;
        this.username = '';
        this.password = '';
      }
    },
    del(id) {
      axios.post("/api/delUserById", { id }).then((res) => {
        if (res.data.code === 0) {
          Toast.success("删除成功");
          this.getData();
        } else {
          Toast.fail("删除失败");
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  border-radius: 20px;
  width: 320px;
  height: 240px;
  background-color: #fff;
  padding: 20px 0;
  i {
    float: right;
    margin-right: 20px;
  }
}
</style>
